<template>
  <div class="home">
    <!-- 头部标题 -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button round icon="search" type="primary" @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channelslist" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in articlelist"
              :key="item.id"
              :title="item.title"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <van-grid :column-num="item.cover.type">
                  <van-grid-item v-for="(it, index) in item.cover.images" :key="index">
                    <van-image :src="it" lazy-load />
                  </van-grid-item>
                </van-grid>
                <br />
                <span>item.aut_name</span>
                <span>评论({{ item.comm_count }})</span>
                <span>{{ item.pubdate | fromNow }}</span>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels, getArticleList } from './home.js'
import * as moment from 'moment';
moment.locale('zh-cn')
export default {
  name: 'home',
  async created () {
    let res = await getChannels()
    // console.log(res);
    this.channelslist = res.data.data.channels
  },
  data () {
    return {
      active: 0,
      articlelist: [], //列表数据
      loading: false,
      finished: false,
      isLoading: false,
      channelslist: [],
      timestamp: null //频道列表
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      let res = await getArticleList({
        channel_id: this.channelslist[this.active].id,
        timestamp: this.timestamp
      })
      console.log(res)
      this.timestamp = res.data.data.pre_timestamp
      this.articlelist.push(...res.data.data.results)

      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.articlelist.length >= 30) {
        this.finished = true
      }
    },
    onRefresh () {
      this.finished = false
      this.isLoading = false
      this.timestamp = null
      this.loading = true
      this.articlelist = []
      this.onLoad()
    },
    tabClick () {
      this.finished = false
      this.isLoading = false
      this.loading = true
      this.articlelist = []
      this.timestamp = null
      this.onLoad()
    }
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.van-nav-bar {
  // top: 0;
  .logo {
    width: 100px;
    height: 30px;
    background: url('~@/assets/logo.png') no-repeat;
    background-size: 100%;
  }
  .van-button {
    width: 120px;
    height: 35px;
    background-color: #5babfb;
    .van-icon {
      color: #fff;
    }
  }
}

.van-tabs {
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 10;
  }
  .van-tabs__content {
    margin-top: 90px;
    margin-bottom: 50px;
    .van-cell__label {
      span {
        padding: 0 5px;
      }
    }
  }
}
</style>
